import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import { TransitionGroup ,CSSTransition} from 'react-transition-group';
// 导入routes路由配置信息
import Routes from './config';
import './index.css'
// react中的路由本质上就是一个组件
class index extends Component {
    render() {
        return (
            <BrowserRouter>
                <Route children={(props)=>{
                    // console.log(props);
                    let {history,location} = props;
                    return (
                        // <TransitionGroup>
                        //     <CSSTransition classNames={history.action === 'POP'?'pop':'push'} key={location.pathname} timeout={500}>
                                <Switch location={location}>
                                    {Routes.map((route,index)=>{
                                        return this.createChildrenRoute(route,index);
                                    })}
                                </Switch>
                        //     </CSSTransition>
                        // </TransitionGroup>
                    );
                }}>
                </Route>
            </BrowserRouter>
        );
    }
    createBaseRoute(route, index){
        return <Route exact path={route.path} component={route.component} key={index}></Route>
    }
    //定义函数完成子路由的构建
    createChildrenRoute(route,index){
        // 获取当前路由的相关配置信息
        let {path,component:Father,children} = route;
        if(children){
            return <Route key={index} path={path} children={()=>{
                return (
                    <Father>
                        <Switch>
                            {
                                children.map((route2,index2)=>{
                                    return this.createChildrenRoute({...route2,path:path+'/'+route2.path},`${index}-${index2}`)
                                })
                            }
                            <Redirect from={path} to={path+'/'+children[0].path}></Redirect>
                        </Switch>
                    </Father>
                )
            }} />
        }else{
            // 生成普通路由实例
            return this.createBaseRoute(route,index);
        }

    }
}

export default index;